<template>
  <div id="sign">
    <Form ref="sign_data" :rules="signRuleValidate" :label-width="80" :model="sign_data">
      <FormItem label="设置昵称" prop="name">
        <Input type="text" placeholder="9个字符长度以内的昵称" v-model="sign_data.name" :maxlength="9">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="手机号码" prop="tel">
        <Input type="text" placeholder="输入11位手机号码" v-model="sign_data.tel" :maxlength="11">
        <Icon type="ios-phone-portrait" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="设置密码" prop="passwd1">
        <Input type="password" placeholder="设置16个字符长度以内的密码" v-model="sign_data.passwd1" :maxlength="16">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="确认密码" prop="passwd2">
        <Input type="password" placeholder="输入16个字符长度以内的密码" v-model="sign_data.passwd2" :maxlength="16">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Button class="login_btn" icon="md-arrow-round-forward" shape="circle" size="large" v-on:click="signSubmit('sign_data')">
        </Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: 'Sign',
    data() {
      return {
        sign_data: {
          name: '',
          tel: '',
          passwd1: '',
          passwd2: '',
        },
        signRuleValidate: {
          name: [{
            required: true,
            message: '昵称不能为空',
            trigger: 'blur'
          }],
          tel: [{
            required: true,
            message: '手机号码不能为空',
            trigger: 'blur'
          }],
          passwd1: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }],
          passwd2: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      signSubmit(data) {
        this.$refs[data].validate((valid) => {
          if (valid) {
            if(this.sign_data.passwd1==this.sign_data.passwd2){
              var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
              if (!myreg.test(this.sign_data.tel)) {
                this.$Message.error('手机号码有误无法注册！');
              } else {
                this.$axios({
                  method: 'post',
                  url: 'tp5_jzt-blog_server/public/index.php/home/sign',
                  // headers:{'Content-Type':'multipart/form-data'},
                  data: {
                    sign_data: this.sign_data
                  },
                }).then((res) => {
                  console.log(res.data)
                  if (res.data) {
                    this.sign_data.name="";
                    this.sign_data.tel="";
                    this.sign_data.passwd1="";
                    this.sign_data.passwd2="";
                    this.$Message.success('注册成功!');
                  } else {
                    this.$Message.error('该手机用户已存在，注册失败！');
                  }
                }).catch((error) => {
                  console.log(error)
                })
              }
            }else{
              this.$Message.error('两次密码不相同无法注册！');
            }
          } else {
            this.$Message.error('输入有误无法注册！');
          }
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login_title {
    text-align: center;
    font-size: 30px;
    line-height: 200px;
  }

  .login_box {
    margin: 10% 5px 0 5px;
  }

  .login_btn {
    display: block;
    float: right;
  }
</style>
